<template>
	<div class="searchTop">
		<svg class="icon" aria-hidden="true" @click="$router.go(-1)">
			<use xlink:href="#icon-zuojiantou"></use>
		</svg>
		<input v-model="searchKey" @keydown.enter="enterKeyWord" type="text" placeholder="请输入要搜索的关键词" />
	</div>
	<div class="searchHistory">
		<span class="searchSpan">历史</span>
		<span @click="searchHistory(item)" class="spanKey" v-for="item in keyWordList" :key="item">
			{{item}}
		</span>
		<svg class="icon" aria-hidden="true" @click="delHistory">
			<use xlink:href="#icon-shanchu"></use>
		</svg>
	</div>

	<div class="itemList">
		<div class="item" v-for="(item, i) in searchList" :key="i">
			<div @click="updateIndex(item)" class="itemLeft">
				<span class="leftSpan">{{ i + 1 }}</span>
				<div>
					<p>{{ item.name }}</p>
					<span v-for="(item1, index) in item.ar" :key="index">
						{{item1.name + '&nbsp&nbsp'}}
					</span>
				</div>
			</div>
			<div class="itemRight">
				<svg class="icon bofang" aria-hidden="true" v-if='item.mv !=0'>
					<use xlink:href="#icon-shipin"></use>
				</svg>
				<svg class="icon liebiao" aria-hidden="true">
					<use xlink:href="#icon-31liebiao"></use>
				</svg>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue'
	
	import {
		useStore 
	} from 'vuex'

	import {
		getSearchMusic
	} from '@/api/home.js'

	export default {
		setup() {
			const keyWordList = ref([])
			const searchKey = ref('')
			const searchList = ref([])
			const store = new useStore()

			onMounted(() => {
				keyWordList.value = JSON.parse(localStorage.getItem('keyWordList')) || []
			})

			const enterKeyWord = async () => {
				if (searchKey.value.trim() === '') {
					return
				}

				const {
					data: res
				} = await getSearchMusic(searchKey.value)
				searchList.value = res.result.songs

				keyWordList.value.unshift(searchKey.value)
				// 去重
				keyWordList.value = [...new Set(keyWordList.value)]

				if (keyWordList.value.length > 5) {
					keyWordList.value.splice(keyWordList.value.length - 1)
				}

				localStorage.setItem('keyWordList', JSON.stringify(keyWordList.value))
				searchKey.value = ''
			}

			const delHistory = () => {
				localStorage.removeItem('keyWordList')
				keyWordList.value = []
			}

			const searchHistory = async (item) => {
				const {
					data: res
				} = await getSearchMusic(item)
				searchList.value = res.result.songs
			}
			
			const updateIndex = item => {
				store.commit("pushPlayList", item)
				store.commit("updatePlayListIndex", store.state.playList.length - 1)
			}

			return {
				keyWordList,
				enterKeyWord,
				searchKey,
				delHistory,
				searchList,
				searchHistory,
				updateIndex
			}
		}
	}
</script>

<style lang="less" scoped>
	.searchTop {
		width: 100%;
		height: 1rem;
		padding: 0 .2rem;
		display: flex;
		align-items: center;

		input {
			margin-left: 0.4rem;
			border: none;
			border-bottom: 1px solid #999;
			width: 95%;
			padding: .1rem;
		}
	}

	.searchHistory {
		width: 100%;
		padding: 0.2rem;
		position: relative;

		.searchSpan {
			font-weight: 700;
		}

		.spanKey {
			display: inline-block;
			padding: 0.1rem 0.2rem;
			background-color: rgb(185, 169, 169);
			border-radius: 0.4rem;
			margin: 0.1rem 0.2rem;
		}

		.icon {
			position: absolute;
			width: 0.3rem;
			height: 0.3rem;
			right: 10px;
		}
	}

	.itemList {
		width: 100%;
		padding: 0.2rem;

		.item {
			width: 100%;
			height: 1.4rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.itemLeft {
				width: 85%;
				height: 100%;
				display: flex;
				align-items: center;

				.leftSpan {
					display: inline-block;
					width: 0.2rem;
					text-align: center;
					color: #999;
				}

				div {
					p {
						width: 4.54rem;
						height: .4rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					span {
						font-weight: 400;
						font-size: .24rem;
						color: #999;
					}

					margin-left: 0.3rem;
				}
			}

			.itemRight {
				width: 20%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.icon {
					fill: #999;
				}

				.bofang {
					position: absolute;
					left: 0;
				}

				.liebiao {
					position: absolute;
					right: 0;
				}
			}
		}
	}
</style>
